<template>
  <page-header-wrapper>
    <a-card>
      <a-form>
        <a-form-item>
          <div class="flex justify-between">
            <div class="flex">
              <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:300px" v-model="name" />
              <a-range-picker style="margin-left:20px;" v-model="dateRange" />
              <a-button style="margin-left:20px;" type="primary" @click="search">查询</a-button>
            </div>
            <div class="flex">
              <a-button type="primary" @click="add" v-action:add>新增</a-button>
              <ListExport :name="name" :columns="columns" :dateRange="dateRange" />
            </div>
          </div>
        </a-form-item>
      </a-form>
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :scroll="{ x: 1500, y: 400 }"
        @change="sorterFun"
      >
        <span slot="nature" slot-scope="nature"> {{ getState(nature) }}</span>
        <span slot="repayDate" slot-scope="repayDate"> {{ humanizeDate(repayDate) }}</span>
        <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
        <span slot="tax" slot-scope="tax"> {{ moneyType(tax) }}</span>
        <span slot="file" slot-scope="_, record">
          <FileDialog :record="record" />
        </span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)" style="margin-right:10px" v-action:get>查看</a>
          <a-popconfirm title="确定删除吗" @confirm="() => onDelete(record.id)">
            <a href="javascript:;" v-action:delete v-if="record.Archive == 0">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getRepay, deleteRepay } from '@/api/common'
import { natures } from '@/dict'
import moment from 'moment'
export default {
  name: 'repayment',
  data() {
    return {
      name: '',
      dateRange: [null, null],
      columns: [
        { title: '项目编号', dataIndex: 'projectNum', key: 'projectNum', width: 130, fixed: 'left' },
        {
          title: '项目地址',
          dataIndex: 'addr',
          key: 'addr',
          width: 110,
          sorter: true,
          sortDirections: ['ascend'],
          fixed: 'left'
        },
        {
          title: '客户名称',
          dataIndex: 'clientName',
          key: 'clientName',
          width: 110
          // sorter: true,
          // sortDirections: ['ascend']
        },
        {
          title: '还款性质',
          dataIndex: 'nature',
          key: 'nature',
          scopedSlots: { customRender: 'nature' },
          filters: [
            { text: 'Interest', value: 1 },
            { text: 'Principal', value: 2 },
            { text: 'Capitalised Line fee', value: 3 },
            { text: 'Other income', value: 4 }
          ],
          filterMultiple: false
          // onFilter: (value, record) => record.nature == value
        },
        { title: '金额', dataIndex: 'amount', key: 'amount', scopedSlots: { customRender: 'amount' } },
        {
          title: '还款日期',
          dataIndex: 'repayDate',
          key: 'repayDate',
          scopedSlots: { customRender: 'repayDate' },
          sorter: true,
          sortDirections: ['ascend']
        },
        { title: '银行', dataIndex: 'bank', key: 'bank' },
        { title: '税款', dataIndex: 'levyIssuer', key: 'levyIssuer', width: 200 },
        { title: '税款金额', dataIndex: 'tax', key: 'tax', scopedSlots: { customRender: 'tax' } },
        { title: '备注', dataIndex: 'remarks', key: 'remarks', width: 120 },
        { title: '文件', dataIndex: 'file', key: 'file', width: 70, scopedSlots: { customRender: 'file' } },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          width: 70,
          scopedSlots: { customRender: 'operation' },
          fixed: 'right'
        }
      ],
      data: [],
      current: 1,
      pagination: {
        total: 1,
        pageSize: 10
        // onChange: this.getData
      },
      columnKey: '',
      nature: '',
      sorterList: [
        { text: 'addr', value: 1 },
        { text: 'clientName', value: 2 },
        { text: 'repayDate', value: 15 }
      ]
    }
  },
  components: {
    FileDialog: () => import('./FilaDialog.vue'),
    ListExport: () => import('../com/repayExport.vue')
  },
  mounted() {
    this.getData()
  },
  methods: {
    getState(v) {
      return natures.find(el => el.value == v)?.text || v
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    search() {
      this.getData()
    },
    add() {
      this.$router.push({ name: 'manage/repayment/add' })
    },
    sorterFun(pagination, filters, sorter) {
      this.nature = filters.nature?.[0] ? filters.nature?.[0] : ''
      this.columnKey = this.sorterList.find(el => el.text == sorter.columnKey)?.value
      this.getData(pagination.current)
    },
    async getData(page = 1) {
      this.current = page
      const _form = {
        page,
        page_size: this.pagination.pageSize
      }
      if (this.dateRange[0]) {
        _form.startDate = Number(this.dateRange[0].startOf('day').format('X'))
        _form.endDate = Number(this.dateRange[1].startOf('day').format('X'))
      }
      if (this.name) {
        _form.name = this.name
      }
      if (this.columnKey) {
        _form.orderType = this.columnKey
      }
      if (this.nature) {
        _form.nature = this.nature
      }
      // console.log(_form)
      var res = await getRepay(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list.map((el, i) => {
        if (el.nature == 4) el.nature = el.otherName
        el.tax = el.nature != 1 ? '-' : el.tax
        el.levyIssuer = el.nature != 1 ? '-' : el.levyIssuer
        // this.otherName[i]=el.otherName
        el.index = i
        return el
      })
    },
    toDetail(record) {
      this.$router.push({ name: 'manage/repayment/single', query: { projectId: record.projectId, id: record.id } })
    },
    async onDelete(id) {
      await deleteRepay(id)
      this.$message.info('已删除')
      this.getData(this.current)
      this.getData()
    }
  }
}
</script>
<style lang="css" scoped></style>
